<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>系统首页</title>
    <link rel="shortcut icon" href="/static/imag/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="/static/css/body.css">
    <script src="/static/js/chart.js"></script>
    <style>
        /* 首页内容样式 */
        .dashboard {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin-top: 20px;
            /* 为仪表板留出空间 */
        }

        .dashboard .card {
            background-color: var(--table-cell-bg-color);
            padding: 20px;
            border-radius: 10px;
            flex: 1 1 calc(33.333% - 40px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            text-align: center;
        }

        .dashboard .card h2 {
            margin: 0 0 10px;
            font-size: 24px;
            color: var(--sidebar-heading-color);
        }

        .dashboard .card p {
            margin: 0;
            font-size: 18px;
            color: #fff;
        }

        /* 图表容器样式 */
        .charts {
            display: flex;
            justify-content: space-between;
            width: 100%;
            /* 使图表容器占满宽度 */
            gap: 20px;
            /* 设置图表之间的间距 */
        }

        .chart-container {
            flex: 1;
            /* 使每个图表容器平分宽度 */
            background-color: var(--table-cell-bg-color);
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            display: flex;
            flex-direction: column;
            align-items: center;
            /* 使内容居中对齐 */
        }

        .chart-container h2 {
            margin: 0 0 10px;
            color: var(--sidebar-heading-color);
        }

        .chart-container canvas {
            width: 100% !important;
            height: 300px !important;
        }
    </style>
</head>

<body>
    <div class="container">
        <!-- 侧边栏 -->
        <div class="sidebar">
            <h2>导航栏</h2>
            <a href="#" onclick="go_back()">返回首页</a>
            <a href="#" onclick="open_win()">窗户状态</a>
            <a href="#" onclick="open_msg()">通知中心</a>
            <a href="#" onclick="open_ai_chat()">ai聊天</a>
            <a href="#" onclick="open_audio()">语音提醒</a>
            <a href="#" onclick="open_lost_and_found()">失物招领中心</a>
            <a href="#" onclick="open_car_video()">小车视频</a>
        </div>

        <!-- 主内容区 -->
        <div class="main-content">
            <div class="header">
                <img src="./static/imag/logo.png" alt="Logo" class="logo" title="点击切换主题" id="logo_switchTheme">
                <h1>系统首页</h1>
                <div class="user-info">
                    <img src="./static/imag/adm.jpg" alt="User Avatar">
                    <div class="invite-code-popup">
                        用户: {{.username}}<br>邀请码: {{.invitecode}}(禁止外传)
                    </div>
                    <div class="username">用户: {{.username}}</div>
                    <button class="logout-button" onclick="logout()">退出登录</button>
                </div>
            </div>
            <div class="dashboard">
                <div class="card">
                    <h2>在线设备总数</h2>
                    <p>{{.data.Online}}</p>
                </div>
                <div class="card">
                    <h2>离线设备总数</h2>
                    <p>{{.data.Offline}}</p>
                </div>
                <div class="card">
                    <h2>报警触发次数</h2>
                    <p>{{.data.Warning}}</p>
                </div>
                <div class="card">
                    <h2>通知中心通知次数</h2>
                    <p>{{.data.Notification}}</p>
                </div>
                <div class="card">
                    <h2>AI对话使用次数</h2>
                    <p>{{.data.AI}}</p>
                </div>
                <div class="card">
                    <h2>失物招领物品数量</h2>
                    <p>{{.data.LostNum}}</p>
                </div>
                <div class="card">
                    <h2>文本转语音次数</h2>
                    <p>{{.data.TextToSpeech}}</p>
                </div>
                <div class="card">
                    <h2>登录次数</h2>
                    <p>{{.data.LoginNum}}</p>
                </div>
                <div class="charts">
                    <div class="chart-container">
                        <h2>当日数据统计</h2>
                        <canvas id="barChart"></canvas>
                    </div>
                    <div class="chart-container">
                        <h2>报警次数折线图</h2>
                        <canvas id="lineChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 底部版权信息 -->
    <div class="footer">
        多模态智能校园管理平台
    </div>
    <script src="/static/js/route.js"></script>

    <script>
        online = {{.data.Online }}
        offline = {{.data.Offline }}
        warning = {{.data.Warning }}
        notification = {{.data.Notification }}
        ai = {{.data.AI }}
        lostnum = {{.data.LostNum }}
        texttospeech = {{.data.TextToSpeech }}
        loginnum = {{.data.LoginNum }}


        // 柱状图数据
        const barCtx = document.getElementById('barChart').getContext('2d');
        const barChart = new Chart(barCtx, {
            type: 'bar',
            data: {
                labels: ['在线设备', '离线设备', '报警次数', '通知次数', 'AI对话', '失物招领', '文本转语音', '登录次数'],
                datasets: [{
                    label: '当日数据统计',
                    data: [online, offline, warning, notification, ai, lostnum, texttospeech, loginnum],
                    backgroundColor: [
                        'rgba(75, 192, 192, 0.2)',
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(255, 206, 86, 0.2)',
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(153, 102, 255, 0.2)'
                    ],
                    borderColor: [
                        'rgba(75, 192, 192, 1)',
                        'rgba(255, 99, 132, 1)',
                        'rgba(255, 206, 86, 1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(153, 102, 255, 1)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true,
                        grid: {
                            color: '#2c313a', // 修改y轴格线颜色
                        }
                    },
                    x: {
                        grid: {
                            color: '#2c313a' // 修改x轴格线颜色
                        },
                        ticks: {
                            color: '#fff' // 修改x轴文字颜色
                        }
                    }
                }
            }
        });

        // 折线图数据

        // {
        //     "date": "2021-08-10",
        //     "today":0,
        //     "yesterday":0,
        //     "the_day_before_yesterday":0,
        //     "three_days_before":0,
        //     "four_days_before":0,
        //     "five_days_before":0,
        //     "six_days_before":0
        // }
        const lineCtx = document.getElementById('lineChart').getContext('2d');
        const lineChart = new Chart(lineCtx, {
            type: 'line',
            data: {
                labels: ['今天', '昨天', '前天', '大前天', '四天前', '五天前', '六天前'],
                datasets: [{
                    label: '报警次数',
                    data: [{{.date_data.Today }},
                     {{.date_data.Yesterday }},
                     {{.date_data.TheDayBeforeYesterday }},
                     {{.date_data.ThreeDaysBefore }},
                     {{.date_data.FourDaysBefore }},
                     {{.date_data.FiveDaysBefore }},
                     {{.date_data.SixDaysBefore }}], // 折线图数据
        borderColor: 'rgba(255, 99, 132, 1)',
            backgroundColor: 'rgba(255, 99, 132, 0.2)',
                borderWidth: 2,
                    fill: true
                }]
            },
        options: {
            scales: {
                y: {
                    beginAtZero: true,
                        grid: {
                        color: '#2c313a' // 修改y轴格线颜色
                    }
                },
                x: {
                    grid: {
                        color: '#2c313a' // 修改x轴格线颜色
                    },
                    ticks: {
                        color: '#fff' // 修改x轴文字颜色
                    }
                }
            }
        }
        });
    </script>
</body>

</html>